
<style>
    #iconsExample{
    }
    #iconsExample ul{
        padding: 5px;
    }
    #iconsExample ul li{
        width:140px;
        list-style: none;
        float: left;
        font-size: 12px;
        background-color:transparent;
        transform: scale(1);
        cursor: pointer;
        position: relative;
        border-radius: 5px;
        transition: all .3s;
    }
    #iconsExample ul li:hover{
        background-color:#ddd;
        transform: scale(1.5);
        z-index: 2;
    }
    #iconsExample ul li.i-list{
        width: 30px;
        font-size: 16px;
        text-align: center;
        border: 1px solid #bbb;
    }
    #iconsExample ul li.i-list.i-big{
        width: 75px;
    }
    #iconsExample ul li.i-list span{
        display: none;
    }
    
    #iconShow{
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
    }
    .icon-middle{
        font-size: 40px;
        margin-left:20px;
    }
    .icon-large{
        margin-left:20px;
        font-size: 70px;
    }
    .icon-slarge{
        margin-left:20px;
        font-size: 100px;
    }
    .icon-c{
        margin-left:20px
    }
    #iconShow .j-input{
        width:270px;
        font-size: 15px
    }
    .list-change{
        position: absolute;
    }
</style>
<div class='title'>图标</div>
<div class='text indent'>图标能在视觉上简洁有效的指引用户操作。特殊情况下，使用图标能够代替文本。JUI采用开源web图标字体
    <a class='link' target="view_window" href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>，提供了344个图标。
    使用<span class="red">&lt;i class="j-icon icon-name">&lt;/i></span>就可以在任意位置插入一个JUI图标。
</div>
<div id="iconsExample" class='text'>
    <div id='iconShow' class='t-center'>
        <span>
            <i jattr='class:{{$.class}}'></i>
            <i jattr='class:{{$.class}}+" icon-middle"'></i>
            <i jattr='class:{{$.class}}+" icon-large"'></i>
            <i jattr='class:{{$.class}}+" icon-slarge"'></i>
        </span>
        <div>
            <input type="text" readonly class="j-input" j='value'>
            <div class="j-btn code-copy" jon='copy'><i class="j-icon icon-copy"></i></div>
        </div>
        <div>
            <input type="text" readonly class="j-input" j='name'>
            <div class="j-btn code-copy" jon='copyName'><i class="j-icon icon-copy"></i></div>
        </div>
        <div>
            <input type="text" class="j-input normal j-icon-right" icon='search' jon='input:queryIcon'>
            <button class="j-btn code-copy" title='切换模式' jon='changeList'><i jattr='class:"icon"+({{$.list}}?"-th":"-bars")+" j-icon"'class=" "></i></button>
        </div>
    </div>
    <ul jdom='iconList' class="clearfix">
        <li><i class="j-icon icon-resize"></i> <span>resize</span></li>
        <li><i class="j-icon icon-expand-full"></i> <span>expand-full</span></li>
        <li><i class="j-icon icon-collapse-full"></i> <span>collapse-full</span></li>
        <li><i class="j-icon icon-yinyang"></i> <span>yinyang</span></li>
        <li><i class="j-icon icon-window"></i> <span>window</span></li>
        <li><i class="j-icon icon-window-alt"></i> <span>window-alt</span></li>
        <li><i class="j-icon icon-carousel"></i> <span>carousel</span></li>
        <li><i class="j-icon icon-spinner-snake"></i> <span>spinner-snake</span></li>
        <li><i class="j-icon icon-spinner-indicator"></i> <span>spinner-indicator</span></li>
        <li><i class="j-icon icon-check-board"></i> <span>check-board</span></li>
        <li><i class="j-icon icon-bar-chart"></i> <span>bar-chart</span></li>
        <li><i class="j-icon icon-github"></i> <span>github</span></li>
        <li><i class="j-icon icon-dot-circle"></i> <span>dot-circle</span></li>
        <li><i class="j-icon icon-cube-alt"></i> <span>cube-alt</span></li>
        <li><i class="j-icon icon-cubes"></i> <span>cubes</span></li>
        <li><i class="j-icon icon-file-pdf"></i> <span>file-pdf</span></li>
        <li><i class="j-icon icon-file-word"></i> <span>file-word</span></li>
        <li><i class="j-icon icon-file-excel"></i> <span>file-excel</span></li>
        <li><i class="j-icon icon-file-powerpoint"></i> <span>file-powerpoint</span></li>
        <li><i class="j-icon icon-file-image"></i> <span>file-image</span></li>
        <li><i class="j-icon icon-file-archive"></i> <span>file-archive</span></li>
        <li><i class="j-icon icon-file-audio"></i> <span>file-audio</span></li>
        <li><i class="j-icon icon-file-movie"></i> <span>file-movie</span></li>
        <li><i class="j-icon icon-file-code"></i> <span>file-code</span></li>
        <li><i class="j-icon icon-circle-o-notch"></i> <span>circle-o-notch</span></li>
        <li><i class="j-icon icon-qq"></i> <span>qq</span></li>
        <li><i class="j-icon icon-wechat"></i> <span>wechat</span></li>
        <li><i class="j-icon icon-history"></i> <span>history</span></li>
        <li><i class="j-icon icon-circle-thin"></i> <span>circle-thin</span></li>
        <li><i class="j-icon icon-sliders"></i> <span>sliders</span></li>
        <li><i class="j-icon icon-newspaper-o"></i> <span>newspaper-o</span></li>
        <li><i class="j-icon icon-calculator"></i> <span>calculator</span></li>
        <li><i class="j-icon icon-paint-brush"></i> <span>paint-brush</span></li>
        <li><i class="j-icon icon-area-chart"></i> <span>area-chart</span></li>
        <li><i class="j-icon icon-pie-chart"></i> <span>pie-chart</span></li>
        <li><i class="j-icon icon-line-chart"></i> <span>line-chart</span></li>
        <li><i class="j-icon icon-toggle-off"></i> <span>toggle-off</span></li>
        <li><i class="j-icon icon-toggle-on"></i> <span>toggle-on</span></li>
        <li><i class="j-icon icon-diamond"></i> <span>diamond</span></li>
        <li><i class="j-icon icon-venus"></i> <span>venus</span></li>
        <li><i class="j-icon icon-mars"></i> <span>mars</span></li>
        <li><i class="j-icon icon-server"></i> <span>server</span></li>
        <li><i class="j-icon icon-music"></i> <span>music</span></li>
        <li><i class="j-icon icon-search"></i> <span>search</span></li>
        <li><i class="j-icon icon-envelope"></i> <span>envelope</span></li>
        <li><i class="j-icon icon-heart"></i> <span>heart</span></li>
        <li><i class="j-icon icon-star"></i> <span>star</span></li>
        <li><i class="j-icon icon-star-empty"></i> <span>star-empty</span></li>
        <li><i class="j-icon icon-user"></i> <span>user</span></li>
        <li><i class="j-icon icon-film"></i> <span>film</span></li>
        <li><i class="j-icon icon-th-large"></i> <span>th-large</span></li>
        <li><i class="j-icon icon-th"></i> <span>th</span></li>
        <li><i class="j-icon icon-th-list"></i> <span>th-list</span></li>
        <li><i class="j-icon icon-check"></i> <span>check</span></li>
        <li><i class="j-icon icon-times"></i> <span>times</span></li>
        <li><i class="j-icon icon-zoom-in"></i> <span>zoom-in</span></li>
        <li><i class="j-icon icon-zoom-out"></i> <span>zoom-out</span></li>
        <li><i class="j-icon icon-off"></i> <span>off</span></li>
        <li><i class="j-icon icon-cog"></i> <span>cog</span></li>
        <li><i class="j-icon icon-trash"></i> <span>trash</span></li>
        <li><i class="j-icon icon-home"></i> <span>home</span></li>
        <li><i class="j-icon icon-file-o"></i> <span>file-o</span></li>
        <li><i class="j-icon icon-time"></i> <span>time</span></li>
        <li><i class="j-icon icon-download-alt"></i> <span>download-alt</span></li>
        <li><i class="j-icon icon-download"></i> <span>download</span></li>
        <li><i class="j-icon icon-upload"></i> <span>upload</span></li>
        <li><i class="j-icon icon-inbox"></i> <span>inbox</span></li>
        <li><i class="j-icon icon-play-circle"></i> <span>play-circle</span></li>
        <li><i class="j-icon icon-repeat"></i> <span>repeat</span></li>
        <li><i class="j-icon icon-refresh"></i> <span>refresh</span></li>
        <li><i class="j-icon icon-list-alt"></i> <span>list-alt</span></li>
        <li><i class="j-icon icon-lock"></i> <span>lock</span></li>
        <li><i class="j-icon icon-flag"></i> <span>flag</span></li>
        <li><i class="j-icon icon-headphones"></i> <span>headphones</span></li>
        <li><i class="j-icon icon-volume-off"></i> <span>volume-off</span></li>
        <li><i class="j-icon icon-volume-up"></i> <span>volume-up</span></li>
        <li><i class="j-icon icon-qrcode"></i> <span>qrcode</span></li>
        <li><i class="j-icon icon-barcode"></i> <span>barcode</span></li>
        <li><i class="j-icon icon-tag"></i> <span>tag</span></li>
        <li><i class="j-icon icon-tags"></i> <span>tags</span></li>
        <li><i class="j-icon icon-book"></i> <span>book</span></li>
        <li><i class="j-icon icon-bookmark"></i> <span>bookmark</span></li>
        <li><i class="j-icon icon-print"></i> <span>print</span></li>
        <li><i class="j-icon icon-camera"></i> <span>camera</span></li>
        <li><i class="j-icon icon-font"></i> <span>font</span></li>
        <li><i class="j-icon icon-bold"></i> <span>bold</span></li>
        <li><i class="j-icon icon-italic"></i> <span>italic</span></li>
        <li><i class="j-icon icon-header"></i> <span>header</span></li>
        <li><i class="j-icon icon-underline"></i> <span>underline</span></li>
        <li><i class="j-icon icon-strikethrough"></i> <span>strikethrough</span></li>
        <li><i class="j-icon icon-eraser"></i> <span>eraser</span></li>
        <li><i class="j-icon icon-align-justify"></i> <span>align-justify</span></li>
        <li><i class="j-icon icon-align-left"></i> <span>align-left</span></li>
        <li><i class="j-icon icon-list"></i> <span>list</span></li>
        <li><i class="j-icon icon-picture"></i> <span>picture</span></li>
        <li><i class="j-icon icon-pencil"></i> <span>pencil</span></li>
        <li><i class="j-icon icon-map-marker"></i> <span>map-marker</span></li>
        <li><i class="j-icon icon-adjust"></i> <span>adjust</span></li>
        <li><i class="j-icon icon-tint"></i> <span>tint</span></li>
        <li><i class="j-icon icon-edit"></i> <span>edit</span></li>
        <li><i class="j-icon icon-share"></i> <span>share</span></li>
        <li><i class="j-icon icon-checked"></i> <span>checked</span></li>
        <li><i class="j-icon icon-arrows"></i> <span>arrows</span></li>
        <li><i class="j-icon icon-step-backward"></i> <span>step-backward</span></li>
        <li><i class="j-icon icon-fast-backward"></i> <span>fast-backward</span></li>
        <li><i class="j-icon icon-backward"></i> <span>backward</span></li>
        <li><i class="j-icon icon-play"></i> <span>play</span></li>
        <li><i class="j-icon icon-pause"></i> <span>pause</span></li>
        <li><i class="j-icon icon-stop"></i> <span>stop</span></li>
        <li><i class="j-icon icon-forward"></i> <span>forward</span></li>
        <li><i class="j-icon icon-fast-forward"></i> <span>fast-forward</span></li>
        <li><i class="j-icon icon-step-forward"></i> <span>step-forward</span></li>
        <li><i class="j-icon icon-eject"></i> <span>eject</span></li>
        <li><i class="j-icon icon-chevron-left"></i> <span>chevron-left</span></li>
        <li><i class="j-icon icon-chevron-right"></i> <span>chevron-right</span></li>
        <li><i class="j-icon icon-plus-sign"></i> <span>plus-sign</span></li>
        <li><i class="j-icon icon-minus-sign"></i> <span>minus-sign</span></li>
        <li><i class="j-icon icon-remove-sign"></i> <span>remove-sign</span></li>
        <li><i class="j-icon icon-check-circle"></i> <span>check-circle</span></li>
        <li><i class="j-icon icon-question-sign"></i> <span>question-sign</span></li>
        <li><i class="j-icon icon-info-sign"></i> <span>info-sign</span></li>
        <li><i class="j-icon icon-remove-circle"></i> <span>remove-circle</span></li>
        <li><i class="j-icon icon-check-circle-o"></i> <span>check-circle-o</span></li>
        <li><i class="j-icon icon-ban-circle"></i> <span>ban-circle</span></li>
        <li><i class="j-icon icon-arrow-left"></i> <span>arrow-left</span></li>
        <li><i class="j-icon icon-arrow-right"></i> <span>arrow-right</span></li>
        <li><i class="j-icon icon-arrow-up"></i> <span>arrow-up</span></li>
        <li><i class="j-icon icon-arrow-down"></i> <span>arrow-down</span></li>
        <li><i class="j-icon icon-share-alt"></i> <span>share-alt</span></li>
        <li><i class="j-icon icon-resize-full"></i> <span>resize-full</span></li>
        <li><i class="j-icon icon-resize-small"></i> <span>resize-small</span></li>
        <li><i class="j-icon icon-plus"></i> <span>plus</span></li>
        <li><i class="j-icon icon-minus"></i> <span>minus</span></li>
        <li><i class="j-icon icon-asterisk"></i> <span>asterisk</span></li>
        <li><i class="j-icon icon-exclamation-sign"></i> <span>exclamation-sign</span></li>
        <li><i class="j-icon icon-gift"></i> <span>gift</span></li>
        <li><i class="j-icon icon-leaf"></i> <span>leaf</span></li>
        <li><i class="j-icon icon-eye-open"></i> <span>eye-open</span></li>
        <li><i class="j-icon icon-eye-close"></i> <span>eye-close</span></li>
        <li><i class="j-icon icon-warning-sign"></i> <span>warning-sign</span></li>
        <li><i class="j-icon icon-plane"></i> <span>plane</span></li>
        <li><i class="j-icon icon-calendar"></i> <span>calendar</span></li>
        <li><i class="j-icon icon-random"></i> <span>random</span></li>
        <li><i class="j-icon icon-comment"></i> <span>comment</span></li>
        <li><i class="j-icon icon-chevron-up"></i> <span>chevron-up</span></li>
        <li><i class="j-icon icon-chevron-down"></i> <span>chevron-down</span></li>
        <li><i class="j-icon icon-shopping-cart"></i> <span>shopping-cart</span></li>
        <li><i class="j-icon icon-folder-close"></i> <span>folder-close</span></li>
        <li><i class="j-icon icon-folder-open"></i> <span>folder-open</span></li>
        <li><i class="j-icon icon-resize-v"></i> <span>resize-v</span></li>
        <li><i class="j-icon icon-resize-h"></i> <span>resize-h</span></li>
        <li><i class="j-icon icon-bar-chart-alt"></i> <span>bar-chart-alt</span></li>
        <li><i class="j-icon icon-camera-retro"></i> <span>camera-retro</span></li>
        <li><i class="j-icon icon-key"></i> <span>key</span></li>
        <li><i class="j-icon icon-cogs"></i> <span>cogs</span></li>
        <li><i class="j-icon icon-comments"></i> <span>comments</span></li>
        <li><i class="j-icon icon-thumbs-o-up"></i> <span>thumbs-o-up</span></li>
        <li><i class="j-icon icon-thumbs-o-down"></i> <span>thumbs-o-down</span></li>
        <li><i class="j-icon icon-star-half"></i> <span>star-half</span></li>
        <li><i class="j-icon icon-heart-empty"></i> <span>heart-empty</span></li>
        <li><i class="j-icon icon-signout"></i> <span>signout</span></li>
        <li><i class="j-icon icon-pushpin"></i> <span>pushpin</span></li>
        <li><i class="j-icon icon-external-link"></i> <span>external-link</span></li>
        <li><i class="j-icon icon-signin"></i> <span>signin</span></li>
        <li><i class="j-icon icon-trophy"></i> <span>trophy</span></li>
        <li><i class="j-icon icon-upload-alt"></i> <span>upload-alt</span></li>
        <li><i class="j-icon icon-lemon"></i> <span>lemon</span></li>
        <li><i class="j-icon icon-phone"></i> <span>phone</span></li>
        <li><i class="j-icon icon-check-empty"></i> <span>check-empty</span></li>
        <li><i class="j-icon icon-bookmark-empty"></i> <span>bookmark-empty</span></li>
        <li><i class="j-icon icon-phone-sign"></i> <span>phone-sign</span></li>
        <li><i class="j-icon icon-credit"></i> <span>credit</span></li>
        <li><i class="j-icon icon-rss"></i> <span>rss</span></li>
        <li><i class="j-icon icon-hdd"></i> <span>hdd</span></li>
        <li><i class="j-icon icon-bullhorn"></i> <span>bullhorn</span></li>
        <li><i class="j-icon icon-bell"></i> <span>bell</span></li>
        <li><i class="j-icon icon-certificate"></i> <span>certificate</span></li>
        <li><i class="j-icon icon-hand-right"></i> <span>hand-right</span></li>
        <li><i class="j-icon icon-hand-left"></i> <span>hand-left</span></li>
        <li><i class="j-icon icon-hand-up"></i> <span>hand-up</span></li>
        <li><i class="j-icon icon-hand-down"></i> <span>hand-down</span></li>
        <li><i class="j-icon icon-circle-arrow-left"></i> <span>circle-arrow-left</span></li>
        <li><i class="j-icon icon-circle-arrow-right"></i> <span>circle-arrow-right</span></li>
        <li><i class="j-icon icon-circle-arrow-up"></i> <span>circle-arrow-up</span></li>
        <li><i class="j-icon icon-circle-arrow-down"></i> <span>circle-arrow-down</span></li>
        <li><i class="j-icon icon-globe"></i> <span>globe</span></li>
        <li><i class="j-icon icon-wrench"></i> <span>wrench</span></li>
        <li><i class="j-icon icon-tasks"></i> <span>tasks</span></li>
        <li><i class="j-icon icon-filter"></i> <span>filter</span></li>
        <li><i class="j-icon icon-group"></i> <span>group</span></li>
        <li><i class="j-icon icon-link"></i> <span>link</span></li>
        <li><i class="j-icon icon-cloud"></i> <span>cloud</span></li>
        <li><i class="j-icon icon-beaker"></i> <span>beaker</span></li>
        <li><i class="j-icon icon-cut"></i> <span>cut</span></li>
        <li><i class="j-icon icon-copy"></i> <span>copy</span></li>
        <li><i class="j-icon icon-paper-clip"></i> <span>paper-clip</span></li>
        <li><i class="j-icon icon-save"></i> <span>save</span></li>
        <li><i class="j-icon icon-sign-blank"></i> <span>sign-blank</span></li>
        <li><i class="j-icon icon-bars"></i> <span>bars</span></li>
        <li><i class="j-icon icon-list-ul"></i> <span>list-ul</span></li>
        <li><i class="j-icon icon-list-ol"></i> <span>list-ol</span></li>
        <li><i class="j-icon icon-table"></i> <span>table</span></li>
        <li><i class="j-icon icon-magic"></i> <span>magic</span></li>
        <li><i class="j-icon icon-caret-down"></i> <span>caret-down</span></li>
        <li><i class="j-icon icon-caret-up"></i> <span>caret-up</span></li>
        <li><i class="j-icon icon-caret-left"></i> <span>caret-left</span></li>
        <li><i class="j-icon icon-caret-right"></i> <span>caret-right</span></li>
        <li><i class="j-icon icon-columns"></i> <span>columns</span></li>
        <li><i class="j-icon icon-sort"></i> <span>sort</span></li>
        <li><i class="j-icon icon-sort-down"></i> <span>sort-down</span></li>
        <li><i class="j-icon icon-sort-up"></i> <span>sort-up</span></li>
        <li><i class="j-icon icon-envelope-alt"></i> <span>envelope-alt</span></li>
        <li><i class="j-icon icon-undo"></i> <span>undo</span></li>
        <li><i class="j-icon icon-dashboard"></i> <span>dashboard</span></li>
        <li><i class="j-icon icon-comment-alt"></i> <span>comment-alt</span></li>
        <li><i class="j-icon icon-comments-alt"></i> <span>comments-alt</span></li>
        <li><i class="j-icon icon-bolt"></i> <span>bolt</span></li>
        <li><i class="j-icon icon-sitemap"></i> <span>sitemap</span></li>
        <li><i class="j-icon icon-umbrella"></i> <span>umbrella</span></li>
        <li><i class="j-icon icon-paste"></i> <span>paste</span></li>
        <li><i class="j-icon icon-lightbulb"></i> <span>lightbulb</span></li>
        <li><i class="j-icon icon-exchange"></i> <span>exchange</span></li>
        <li><i class="j-icon icon-cloud-download"></i> <span>cloud-download</span></li>
        <li><i class="j-icon icon-cloud-upload"></i> <span>cloud-upload</span></li>
        <li><i class="j-icon icon-bell-alt"></i> <span>bell-alt</span></li>
        <li><i class="j-icon icon-coffee"></i> <span>coffee</span></li>
        <li><i class="j-icon icon-file-text-o"></i> <span>file-text-o</span></li>
        <li><i class="j-icon icon-building"></i> <span>building</span></li>
        <li><i class="j-icon icon-double-angle-left"></i> <span>double-angle-left</span></li>
        <li><i class="j-icon icon-double-angle-right"></i> <span>double-angle-right</span></li>
        <li><i class="j-icon icon-double-angle-up"></i> <span>double-angle-up</span></li>
        <li><i class="j-icon icon-double-angle-down"></i> <span>double-angle-down</span></li>
        <li><i class="j-icon icon-angle-left"></i> <span>angle-left</span></li>
        <li><i class="j-icon icon-angle-right"></i> <span>angle-right</span></li>
        <li><i class="j-icon icon-angle-up"></i> <span>angle-up</span></li>
        <li><i class="j-icon icon-angle-down"></i> <span>angle-down</span></li>
        <li><i class="j-icon icon-desktop"></i> <span>desktop</span></li>
        <li><i class="j-icon icon-laptop"></i> <span>laptop</span></li>
        <li><i class="j-icon icon-tablet"></i> <span>tablet</span></li>
        <li><i class="j-icon icon-mobile"></i> <span>mobile</span></li>
        <li><i class="j-icon icon-circle-blank"></i> <span>circle-blank</span></li>
        <li><i class="j-icon icon-quote-left"></i> <span>quote-left</span></li>
        <li><i class="j-icon icon-quote-right"></i> <span>quote-right</span></li>
        <li><i class="j-icon icon-spinner"></i> <span>spinner</span></li>
        <li><i class="j-icon icon-circle"></i> <span>circle</span></li>
        <li><i class="j-icon icon-reply"></i> <span>reply</span></li>
        <li><i class="j-icon icon-folder-close-alt"></i> <span>folder-close-alt</span></li>
        <li><i class="j-icon icon-folder-open-alt"></i> <span>folder-open-alt</span></li>
        <li><i class="j-icon icon-expand-alt"></i> <span>expand-alt</span></li>
        <li><i class="j-icon icon-collapse-alt"></i> <span>collapse-alt</span></li>
        <li><i class="j-icon icon-smile"></i> <span>smile</span></li>
        <li><i class="j-icon icon-frown"></i> <span>frown</span></li>
        <li><i class="j-icon icon-meh"></i> <span>meh</span></li>
        <li><i class="j-icon icon-gamepad"></i> <span>gamepad</span></li>
        <li><i class="j-icon icon-keyboard"></i> <span>keyboard</span></li>
        <li><i class="j-icon icon-flag-alt"></i> <span>flag-alt</span></li>
        <li><i class="j-icon icon-flag-checkered"></i> <span>flag-checkered</span></li>
        <li><i class="j-icon icon-terminal"></i> <span>terminal</span></li>
        <li><i class="j-icon icon-code"></i> <span>code</span></li>
        <li><i class="j-icon icon-reply-all"></i> <span>reply-all</span></li>
        <li><i class="j-icon icon-star-half-full"></i> <span>star-half-full</span></li>
        <li><i class="j-icon icon-location-arrow"></i> <span>location-arrow</span></li>
        <li><i class="j-icon icon-crop"></i> <span>crop</span></li>
        <li><i class="j-icon icon-code-fork"></i> <span>code-fork</span></li>
        <li><i class="j-icon icon-unlink"></i> <span>unlink</span></li>
        <li><i class="j-icon icon-question"></i> <span>question</span></li>
        <li><i class="j-icon icon-info"></i> <span>info</span></li>
        <li><i class="j-icon icon-shield"></i> <span>shield</span></li>
        <li><i class="j-icon icon-calendar-empty"></i> <span>calendar-empty</span></li>
        <li><i class="j-icon icon-rocket"></i> <span>rocket</span></li>
        <li><i class="j-icon icon-chevron-sign-left"></i> <span>chevron-sign-left</span></li>
        <li><i class="j-icon icon-chevron-sign-right"></i> <span>chevron-sign-right</span></li>
        <li><i class="j-icon icon-chevron-sign-up"></i> <span>chevron-sign-up</span></li>
        <li><i class="j-icon icon-chevron-sign-down"></i> <span>chevron-sign-down</span></li>
        <li><i class="j-icon icon-html5"></i> <span>html5</span></li>
        <li><i class="j-icon icon-anchor"></i> <span>anchor</span></li>
        <li><i class="j-icon icon-unlock-alt"></i> <span>unlock-alt</span></li>
        <li><i class="j-icon icon-bullseye"></i> <span>bullseye</span></li>
        <li><i class="j-icon icon-ellipsis-h"></i> <span>ellipsis-h</span></li>
        <li><i class="j-icon icon-ellipsis-v"></i> <span>ellipsis-v</span></li>
        <li><i class="j-icon icon-rss-sign"></i> <span>rss-sign</span></li>
        <li><i class="j-icon icon-play-sign"></i> <span>play-sign</span></li>
        <li><i class="j-icon icon-minus-sign-alt"></i> <span>minus-sign-alt</span></li>
        <li><i class="j-icon icon-plus-sign-alt"></i> <span>plus-sign-alt</span></li>
        <li><i class="j-icon icon-check-minus"></i> <span>check-minus</span></li>
        <li><i class="j-icon icon-check-plus"></i> <span>check-plus</span></li>
        <li><i class="j-icon icon-level-up"></i> <span>level-up</span></li>
        <li><i class="j-icon icon-level-down"></i> <span>level-down</span></li>
        <li><i class="j-icon icon-check-sign"></i> <span>check-sign</span></li>
        <li><i class="j-icon icon-edit-sign"></i> <span>edit-sign</span></li>
        <li><i class="j-icon icon-external-link-sign"></i> <span>external-link-sign</span></li>
        <li><i class="j-icon icon-share-sign"></i> <span>share-sign</span></li>
        <li><i class="j-icon icon-compass"></i> <span>compass</span></li>
        <li><i class="j-icon icon-collapse"></i> <span>collapse</span></li>
        <li><i class="j-icon icon-collapse-top"></i> <span>collapse-top</span></li>
        <li><i class="j-icon icon-expand"></i> <span>expand</span></li>
        <li><i class="j-icon icon-dollar"></i> <span>dollar</span></li>
        <li><i class="j-icon icon-yen"></i> <span>yen</span></li>
        <li><i class="j-icon icon-file"></i> <span>file</span></li>
        <li><i class="j-icon icon-file-text"></i> <span>file-text</span></li>
        <li><i class="j-icon icon-sort-by-alphabet"></i> <span>sort-by-alphabet</span></li>
        <li><i class="j-icon icon-sort-by-alphabet-alt"></i> <span>sort-by-alphabet-alt</span></li>
        <li><i class="j-icon icon-sort-by-attributes"></i> <span>sort-by-attributes</span></li>
        <li><i class="j-icon icon-sort-by-attributes-alt"></i> <span>sort-by-attributes-alt</span></li>
        <li><i class="j-icon icon-sort-by-order"></i> <span>sort-by-order</span></li>
        <li><i class="j-icon icon-sort-by-order-alt"></i> <span>sort-by-order-alt</span></li>
        <li><i class="j-icon icon-thumbs-up"></i> <span>thumbs-up</span></li>
        <li><i class="j-icon icon-thumbs-down"></i> <span>thumbs-down</span></li>
        <li><i class="j-icon icon-long-arrow-down"></i> <span>long-arrow-down</span></li>
        <li><i class="j-icon icon-long-arrow-up"></i> <span>long-arrow-up</span></li>
        <li><i class="j-icon icon-long-arrow-left"></i> <span>long-arrow-left</span></li>
        <li><i class="j-icon icon-long-arrow-right"></i> <span>long-arrow-right</span></li>
        <li><i class="j-icon icon-apple"></i> <span>apple</span></li>
        <li><i class="j-icon icon-windows"></i> <span>windows</span></li>
        <li><i class="j-icon icon-android"></i> <span>android</span></li>
        <li><i class="j-icon icon-linux"></i> <span>linux</span></li>
        <li><i class="j-icon icon-sun"></i> <span>sun</span></li>
        <li><i class="j-icon icon-moon"></i> <span>moon</span></li>
        <li><i class="j-icon icon-archive"></i> <span>archive</span></li>
        <li><i class="j-icon icon-bug"></i> <span>bug</span></li>
        <li><i class="j-icon icon-zhifubao"></i> <span>zhifubao</span></li>
        <li><i class="j-icon icon-zhifubao-square"></i> <span>zhifubao-square</span></li>
        <li><i class="j-icon icon-taobao"></i> <span>taobao</span></li>
        <li><i class="j-icon icon-weibo"></i> <span>weibo</span></li>
        <li><i class="j-icon icon-renren"></i> <span>renren</span></li>
        <li><i class="j-icon icon-chrome"></i> <span>chrome</span></li>
        <li><i class="j-icon icon-firefox"></i> <span>firefox</span></li>
        <li><i class="j-icon icon-ie"></i> <span>ie</span></li>
        <li><i class="j-icon icon-opera"></i> <span>opera</span></li>
        <li><i class="j-icon icon-safari"></i> <span>safari</span></li>
        <li><i class="j-icon icon-node"></i> <span>node</span></li>
        <li><i class="j-icon icon-layout"></i> <span>layout</span></li>
        <li><i class="j-icon icon-usecase"></i> <span>usecase</span></li>
        <li><i class="j-icon icon-stack"></i> <span>stack</span></li>
        <li><i class="j-icon icon-branch"></i> <span>branch</span></li>
        <li><i class="j-icon icon-chat"></i> <span>chat</span></li>
        <li><i class="j-icon icon-chat-line"></i> <span>chat-line</span></li>
        <li><i class="j-icon icon-chat-dot"></i> <span>chat-dot</span></li>
        <li><i class="j-icon icon-cube"></i> <span>cube</span></li>
        <li><i class="j-icon icon-database"></i> <span>database</span></li>
        <li class='i-big'><i class="j-icon icon-chanzhi"></i> <span>chanzhi</span></li>
        <li class='i-big'><i class="j-icon icon-chanzhi-pro"></i> <span>chanzhi-pro</span></li>
        <li class='i-big'><i class="j-icon icon-zsite"></i> <span>zsite</span></li>
        <li class='i-big'><i class="j-icon icon-zsite-pro"></i> <span>zsite-pro</span></li>
    </ul>
</div>
<div class='title'>图标旋转</div>
<div class='text'>
    另外，使用<span class="red">icon-spin</span>类，可以使图标旋转起来：
</div>
    <div class='j-code' disabled width='99%' height='auto'>
<i class="j-icon icon-spinner-indicator icon-spin xl"></i>
<i class="j-icon icon-spinner icon-spin xl"></i>
<i class="j-icon icon-refresh icon-spin xl"></i>
    </div>
<div class='text'>
    效果如下：
</div>
    <div class='out'>
        <i class="j-icon icon-spinner-indicator icon-spin xl"></i>
        <i class="j-icon icon-spinner icon-spin xl"></i>
        <i class="j-icon icon-refresh icon-spin xl"></i>
    </div>
</div>
<script>
    new Jet({
        data:{
            class:'j-icon icon-resize',
            value:'<i class="j-icon icon-resize"></i>',
            list:false,
            name:'icon="resize"'
        },
        onmounted:function(){
            var _this=this;
            $J.id('iconsExample').findTag('li').clk(function(){
                _this.value=this.child(0).allHtml();
                _this.class=this.child(0).className;
                _this.name='icon="'+_this.class.substring("j-icon icon-".length)+'"';
            });
        },
        func:{
            copy:function(){
                if($J.copy(this.value)){
                    JUI.msg.success('复制成功')
                }
            },copyName:function(){
                if($J.copy(this.name)){
                    JUI.msg.success('复制成功')
                }
            },queryIcon:function(opt){
                this.$dom.iconList.ele.child().toArray().filter(function(item){
                    return item.child(1).txt().indexOf(opt.ele.value)!==-1
                }).forEach(function(item){
                    item.removeClass('hide');
                });
                this.$dom.iconList.ele.child().toArray().filter(function(item){
                    return item.child(1).txt().indexOf(opt.ele.value)===-1
                }).forEach(function(item){
                    item.addClass('hide');
                });
            },changeList:function(){
                this.list=!this.list;
                if(this.list){
                    this.$dom.iconList.ele.child().addClass('i-list')
                }else{
                    this.$dom.iconList.ele.child().removeClass('i-list')
                }
            }
        }
    });
</script>